<template>
	<view style="height: 100%; background-color: #F1F1F1;">
		<view class="swiper-image">
			<swiper indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" style="height: calc(55vh);">
				<swiper-item v-for="(item ,index) in goodsDetial.image" :key="index">
					<image :src="item" style="width:calc(100vw); height: calc(55vh);" mode="scaleToFill" @click="toTt(goodsDetial.goodsUrl)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="body-data back" style="height: calc(35vh);">
			<view style="margin: calc(3vh) 0 calc(2vh) calc(3vw);">
				<text style="font-size: calc(3vh);color: #FF0000;margin-left: calc(1vw);">￥{{goodsDetial.price}}</text>
				<!-- <text style="background-color: #FF0000;color: #DD524D;">佣金￥{{goodsDetial.commission}}</text> -->
				<text style="color: #FF0000;border: #FF0000 solid 1rpx;margin-left: calc(1vw);">佣金￥{{goodsDetial.commission}}</text>
				<!-- <text style="color: #FF0000;border: #FF0000 solid 1rpx;margin-left: calc(1vw);">比例{{proportion}}%</text> -->
			</view>
			<!-- <view style="margin: calc(1vh) 0 calc(1vh) calc(3vw);">
				<text id="text">直播要求粉丝数：{{goodsDetial.fansNum}}</text>
				<text id="text">|</text>
				<text id="text">直播样品数：{{liveCount}}</text>
			</view> -->
			<view style="margin: 0 0 0 calc(3vw);">
				<text id="text">短视频要求粉丝数：{{goodsDetial.fansNum}}</text>
				<text id="text">|</text>
				<!-- <text id="text">短视频样品数：{{videoCount}}</text> -->
				<text id="text">直播要求粉丝数：{{goodsDetial.fansNum}}</text>
			</view>
			<view style="margin: calc(5vh) 0 0 calc(3vw);font-size: larger;font-weight: 700;">
				<text>{{goodsDetial.name}}</text>
			</view>
			<!-- <view style="margin: calc(30vh) 0 0 0;font-size: calc(2vh);font-weight: 700;position: absolute;">
				<text style="width: calc(50vw);color: #E6E6E6;margin-left: calc(20vw);">复制链接</text>
				<text style="color: #E6E6E6;margin-left: calc(15vw);">|</text>
				<text style="color: #E6E6E6;margin-left: calc(15vw);">无</text>
			</view> -->
		</view>
		<view class="body back" style="margin-top: calc(1vh);">
			<view>
				<text style="font-size: calc(2.5vh);font-weight: 700;float: left;">免费申请</text>
			</view>
			<view style="display: flex; height: calc(15vh); margin-top: calc(0.1vh);">
				<view class="body-free-item" @click="toOrder(0)" id="disabled">
					<image src="../../static/resource.png" mode="widthFix"></image>
					<text>获取素材</text>
				</view>
				<view class="body-free-item" @click="toOrder(1)" id="disabled">
					<image src="../../static/video.png" mode="widthFix"></image>
					<text>视频申请</text>
				</view>
				<view class="body-free-item" @click="toOrder(2)">
					<image src="../../static/shot.png" mode="widthFix"></image>
					<text>短视频样品</text>
				</view>
				<!-- <view class="body-free-item" @click="toOrder(3)" id="disabled">
					<image src="../../static/lineplay.png" mode="widthFix"></image>
					<text>直播样品</text>
				</view> -->
			</view>
		</view>
		<!-- <view class="body-data back" style="height: calc(9vh);display: inline-block;" @click="toApplication">
			<text style="display: inline-block;position:sticky;float: left;margin-top: calc(3vh);font-size: calc(2vh);">申请达人：</text>
			<view style="display: inline-block;position: absolute; position:sticky;">
				<image src="../../static/logo.png" style="width: calc(11vw);margin: calc(1vh) 0 0 calc(2vw);" mode="widthFix" v-for="(item,index) in 3"
				 :key="index"></image>
			</view>
			<text style="font-size: calc(3vh);float: right;align-items: center;margin-top: calc(2vh);color: #C0C0C0;">></text>
		</view> -->
		<view class="body-data back" style="padding-bottom: calc(2vh);">
			<view style="margin: calc(2vh) 0 0 calc(2vw);">
				<text style="font-size: calc(2.5vh);font-weight: 700;">商品说明</text>
			</view>
			<text style="display: flex;">
				{{goodsDetial.characteristic}}
			</text>
		</view>
		<view class="body-data back" style="display: inline-block;height: calc(9vh);">
			<view>
				<!-- <view style="margin: calc(2vh) 0 0 calc(2vw);position:sticky;float: left;">
					<image src="../../static/logo.png" style="width: 80rpx;height: 80rpx;margin-left: calc(5vw);" mode="widthFix"></image>
				</view> -->
				<view style="position:sticky; float: left;margin: calc(3vh) 0 0 calc(2vw);width: calc(45vw);">
					<text style="">{{goodsDetial.shopName}}</text>
				</view>
			</view>
			<!-- <uni-icons type="forward" size="24" style="vertical-align: calc(3vh);margin-left: calc(50vw);"></16ni-icons> -->
			<view style="display: inline-block;position:sticky;float: right;margin-top: calc(2vh);">
				<button class="all-product-btn" type="default" @click="toGoodsAll">全部商品</button>
			</view>
		</view>
		<view class="text-center" style="font-size: calc(4vw);">
			<text><b>验货流程</b></text>
		</view>
		<!-- <view class="text-center" v-for="(item,index) in goodsDetial.imagesDetails" :key="index" style="width: 100%;">
			<image :src="item" style="width: 100%;"></image>
		</view> -->
		<view class="ivon" style="width: calc(100vw);background-color: #FFFFFF; margin-top: calc(2vh);display: flex; flex-direction: column; font-size: calc(5vw);padding-bottom: calc(3vh);">
			<view style="margin-top: calc(2vh); display: flex;">
				<view style="">
					<image src="../../static/free.png" mode=""></image>
				</view>
				<view style="margin-left: calc(10vw);line-height: calc(8vw);"><b>达人免费选样</b></view>
			</view>
			<view style="margin-top: calc(5vh); display: flex;">
				<view style="text-align: center;">
					<image src="../../static/sendgoods.png" mode=""></image>
				</view>
				<view style="margin-left: calc(10vw);line-height: calc(8vw);"><b>商家审核发样</b></view>
			</view>
			<view style="margin-top: calc(5vh); display: flex;">
				<view style="text-align: center;">
					<image src="../../static/receivegoods.png" mode=""></image>
				</view>
				<view style="margin-left: calc(10vw);line-height: calc(8vw);"><b>达人收货</b></view>
			</view>
			<view style="margin-top: calc(5vh); display: flex;">
				<view style="text-align: center;">
					<image src="../../static/live.png" mode=""></image>
				</view>
				<view style="margin-left: calc(10vw);line-height: calc(8vw);"><b>发视频/直播</b></view>
			</view>
			<view style="margin-top: calc(5vh); display: flex;">
				<view style="text-align: center;">
					<image src="../../static/work.png" mode=""></image>
				</view>
				<view style="margin-left: calc(10vw);line-height: calc(8vw);"><b>交作业</b></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function(options) {
			this.user.id = options.id;
			this.user.userId = options.userId;
			console.log(options)
			this.getGoodsChoiceById();
		},
		data() {
			return {
				id: "",
				user: {},
				goodsDetial: {},
				goodsDescription: "商品说明",
				price: "价格",
				commission: "佣金",
				proportion: "比例",
				liveFans: "直播要求粉丝数",
				liveCount: "直播样品数",
				videoFans: "短视频要求粉丝数",
				videoCount: "短视频样品数",
				goodsName: "商品名称",
				shopName: "店铺名",
				info: [{
					content: 'https://images.pexels.com/photos/5415837/pexels-photo-5415837.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
				}, {
					content: 'https://images.pexels.com/photos/5415837/pexels-photo-5415837.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
				}, {
					content: 'https://images.pexels.com/photos/5415837/pexels-photo-5415837.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
				}],
			}
		},
		methods: {
			toTt(url) {
				console.log(url);
				window.location.href = url;
			},
			getGoodsChoiceById() {
				this.$http({
					url: '/goods/getGoodsChoiceById/' + this.user.id,
					method: 'GET',
				}).then(res => {
					this.goodsDetial = res.data.data;
					this.goodsDetial.image = [res.data.data.image];
					this.goodsDetial.imagesDetails = JSON.parse(res.data.data.imagesDetails)
					this.goodsDetial.goodsCarousel = JSON.parse(res.data.data.goodsCarousel)
				});
			},
			toGoodsAll() {
				uni.navigateTo({
					url: "/pages/goods/goodsAll?id=" + this.user.id + "&userId=" + this.user.userId
				})
			},
			toOrder(index) {
				uni.navigateTo({
					url: "/pages/order/order?index=" + index + "&id=" + this.user.id + "&userId=" + this.user.userId
				})
			},
			toApplication() {
				uni.navigateTo({
					url: "/pages/master/application"
				})
			}
		}
	}
</script>

<style>
	#disabled {
		pointer-events: none;
		cursor: default;
		opacity: 0.6;
	}

	.swiper-image {
		background-color: #FFFFFF;
		width: calc(100vw);
		height: calc(55vh);
		border-radius: calc(1vw);
		/* margin: 0 0 0 calc(4vw); */
		/* padding: 0 calc(1vw) 0 calc(1vw); */
	}

	.body-data {
		flex: 1;
		display: flex;
		flex-direction: column;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: calc(1vh) calc(2vw) 0 calc(2vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.back {
		background-color: #FFFFFF;
	}

	.body {
		flex: 1;
		display: flex;
		flex-direction: column;
		text-align: center;
		justify-content: center;
	}

	.body {
		display: flex;
		flex-direction: column;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: 0 calc(2vw) 0 calc(2vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.body-free-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		text-align: center;
		justify-content: center;
		/* background-color: rgba(0,0,0,0.4); */
	}

	.body-free-item image {
		width: calc(10vw);
		margin-left: calc(12vw);
		margin-bottom: calc(2vh);
	}

	.all-product-btn {
		font-size: calc(2vh);
		width: calc(26vw);
		height: calc(5vh);
		border: #FF0000 solid 1rpx;
		background-color: #FFFFFF;
		color: #FF0000;
	}

	.text-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	#text {
		font-size: small;
		color: #999999;
	}

	#disabled {
		pointer-events: none;
		cursor: default;
		background-color: rgba(0, 0, 0, 0.7);
	}
	
	.ivon image {
		width: calc(8vw);
		height: calc(8vw);
		margin-left: calc(5vw);
	}
</style>
